<template>
  <div class="h-100 w-100 jdtqohyj">
    <div class="left_panel">
      <div class="left_title">
        <div class="panel-title">极端天气影响综合预警</div>
        <el-row style="margin-top:0.5vh">
          <el-col :span="8" :offset="16" style="text-align:right">
            <div
              :class="active=='day'?'buttonDiv  active':'buttonDiv'"
              @click="buttonClick('day')"
            >日</div>
            <div
              :class="active=='week'?'buttonDiv  active':'buttonDiv'"
              @click="buttonClick('week')"
            >周</div>
            <div
              :class="active=='month'?'buttonDiv  active':'buttonDiv'"
              @click="buttonClick('month')"
            >月</div>
          </el-col>
        </el-row>
      </div>
      <div class="btm_panel">
        <el-row class="full-h">
          <el-col :span="6">
            <div class="text-panel">
              <div>
                <img src="../../public/images/jdtq_03.png" alt />
              </div>
              <div class="text">受影响区域</div>
              <div class="num">
                {{rightObj[active].total.qy}}
                <span>(省)</span>
              </div>
            </div>
            <div class="text-panel">
              <div>
                <img src="../../public/images/jdtq_04.png" alt />
              </div>
              <div class="text">受影响矿山</div>
              <div class="num">
                {{rightObj[active].total.mk}}
                <span>(座)</span>
              </div>
            </div>
            <div class="text-panel">
              <div>
                <img src="../../public/images/jdtq_05.png" alt />
              </div>
              <div class="text">受影响人数</div>
              <div class="num">
                {{rightObj[active].total.rs}}
                <span>(人)</span>
              </div>
            </div>
          </el-col>
          <el-col :span="18" class="full-h">
            <vae-echarts height="calc(100% )" style="height: calc(100%)" :options="barOption"></vae-echarts>
          </el-col>
        </el-row>
      </div>
      <div class="btm_panel2">
        <el-row class="full-h" :gutter="10">
          <el-col :span="10" class="full-h">
            <div class="echart-panel">
              <div class="panel-title">
                <b></b>尾矿库数量
                <i></i>
              </div>
              <div class="panel-content full-h">
                <div class="cjdy_right_panel">
                  <div class="box">
                    <div class="text">一等尾矿库</div>
                    <div class="bg">
                      {{level_fb.one}}
                      <span>座</span>
                    </div>
                  </div>
                  <div class="box">
                    <div class="text">二级尾矿库</div>

                    <div class="bg">
                      {{level_fb.two}}
                      <span>座</span>
                    </div>
                  </div>
                  <div class="box">
                    <div class="text">三等尾矿库</div>
                    <div class="bg">
                      {{level_fb.three}}
                      <span>座</span>
                    </div>
                  </div>
                  <div class="box">
                    <div class="text">四五等尾矿库</div>
                    <div class="bg bg1">
                      {{level_fb.fourAndFive}}
                      <span>座</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="14" class="full-h">
            <div class="echart-panel">
              <div class="panel-title">
                <b></b>尾矿库下游人数：104927
                <i></i>
              </div>
              <div class="panel-content">
                <div class="listPanel">
                  <div class="listRow" v-for="(item,index) in person_fb" :key="index">
                    <el-col :span="18" style="text-align:left ">{{item.text}}</el-col>
                    <el-col :span="6" style="text-align:right ">{{item.num}}</el-col>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="mid_panel"></div>
    <div class="right_panel">
      <div class="btm_panel">
        <div class="panel-title" @click="initYJ" style="cursor: pointer;">
          <b></b>极端天气实时警示信息
          <i></i>
        </div>
        <div class="panel-content">
          <vue-seamless-scroll :data="mapJson" class="warp" :class-option="classOption">
            <div
              :class="activeRow==item.id?'cont_panel  active':'cont_panel'"
              @click="rowClick(item)"
              v-for="(item,index) in mapJson"
              :key="index"
            >
              <div class="lft_img"></div>
              <div class="ct_panel">
                <div class="title">{{item.name}}</div>
                <div class="ctitle">位置：{{item.address}}座</div>
                <div class="ctitle">灾害类型：{{item.type}}</div>
                <div class="ctitle">警示信息：{{item.content}}</div>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <!-- 预留弹框 -->
    <local-dialog
      :title="dia.title"
      width="80%"
      :visible.sync="dia.show"
      :close-on-click-modal="false"
      v-if="dia.show"
    >
        <div class="popup_pg">
          <div class="name" style="text-align:left"> <b> 推送消息</b>：预计未来12小时仍将有30-50毫米降水，请持续关注天气预警信息，做好防范措施！</div>
          <div class="text" style="text-align:left"><b> 推送时间</b>：2021-07-05 15:42</div>
          <div class="text" style="text-align:left"><b> 接收人</b>：金宝屯煤矿-何田</div>
          <div class="text" style="text-align:left"><b> 消息回复</b>：收到，已做好相关应对措施，井下人员逐步撤离出井！</div>
          <div class="text" style="text-align:center"><b> 井下人员曲线</b>：</div>
          <vae-echarts  :options="dia.option"  height="400px"  style="height: 400px"></vae-echarts>
        </div>
    </local-dialog>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

const pageName = "views_sgzz";

export default {
  name: pageName,
  components: {
    vueSeamlessScroll
  },
  props: {
    vm: null
  },
  data() {
    return {
      //预留弹窗
      dia:{
        title:"详情",
        show:false,
        option:{}
      },
      //滚动条速度
      classOption: {
        step: 0.2
      },
      ssjs_list: [
        {
          title: "贵州安顺冲击地压事故警示，请注意防范！",
          num: 16,
          reason: "6.15因框内毒气泄漏发生事故，井下共有6人死亡。",
          time: "2021-06-22 10:15:35"
        },
        {
          title: "广西桂林地震活跃，请注意防范！",
          num: 23,
          reason: "6.15因框内毒气泄漏发生事故，井下共有8人死亡。",
          time: "2021-06-22 10:15:35"
        },
        {
          title: "贵州安顺冲击地压事故警示，请注意防范！",
          num: 28,
          reason: "6.15因框内毒气泄漏发生事故，井下共有10人死亡。",
          time: "2021-06-22 10:15:35"
        },
        {
          title: "云南大理地震活跃，请注意防范！",
          num: 33,
          reason: "6.15因框内毒气泄漏发生事故，井下共有15人死亡。",
          time: "2021-06-22 10:15:35"
        },
        {
          title: "美国蒙大纳州铂金矿发生事故，请各矿提高警惕！",
          num: 36,
          reason: "6.15因框内毒气泄漏发生事故，井下共有17人死亡。",
          time: "2021-06-22 10:15:35"
        },
        {
          title: "美国蒙大纳州铂金矿发生事故，请各矿提高警惕！",
          num: 39,
          reason: "6.15因框内毒气泄漏发生事故，井下共有19人死亡。",
          time: "2021-06-22 10:15:35"
        },
        {
          title: "美国蒙大纳州铂金矿发生事故，请各矿提高警惕！",
          num: 42,
          reason: "6.15因框内毒气泄漏发生事故，井下共有20人死亡。",
          time: "2021-06-22 10:15:35"
        }
      ],
      barOption: {},
      active: "day",
      rightObj: {
        day: {
          data: {},
          total: {
            rs: "459",
            qy: "6",
            mk: "32"
          }
        },
        month: {
          data: {},
          total: {
            rs: "459",
            qy: "6",
            mk: "32"
          }
        },
        week: {
          data: {},
          total: {
            rs: "459",
            qy: "6",
            mk: "32"
          }
        }
      },
      mapText: {
        gz: "广州",
        hb: "河北",
        hlj: "黑龙江",
        jl: "吉林",
        nmg: "内蒙古",
        "sx-1": "山西",
        "sx-2": "陕西"
      },
      level_fb: {},
      person_fb: [],
      mapJson: [
        {
          name: "贵州中岭矿业有限责任公司中岭煤矿",
          id: "1",
          lat: 26.700332,
          lng: 105.238521,
          address: "贵州毕节",
          type: "大风",
          content:
            "未来24小时毕节地区可能受大风影响,平均风力可达6级，阵风7级，请区域内矿山注意防范。"
        },
        {
          name: "贵州广盛源集团矿业有限公司荔波县立化镇下寨煤矿",
          id: "2",
          lat: 26.406612,
          lng: 106.241334,
          address: "贵州黔南",
          type: "大风",
          content:
            "未来24小时毕节地区可能受大风影响,平均风力可达6级，阵风7级，请区域内矿山注意防范。"
        },
        {
          name: "铁法煤业（集团）有限责任公司大兴煤矿",
          id: "3",
          lat: 26.23888,
          lng: 105.925869,
          address: "辽宁铁岭",
          type: "雷电",
          content:
            "未来1到3小时，出现雷雨大风天气，平均风力可达8级以上，阵风风力可达10级以上，同时可能伴有冰雹、短时强降水等强对流天气，请区域矿山注意防范"
        },
        {
          name: "平庄煤业（集团）有限责任公司元宝山露天煤矿",
          id: "4",
          lat: 42.048224,
          lng: 119.29862,
          address: "内蒙古赤峰",
          type: "雷电",
          content:
            "未来24小时内蒙古赤峰市有大风天气，请辖区内矿山注意防范因雷电、大风引起的停电事故。"
        },
        {
          name: "辽源矿业（集团）有限责任公司金宝屯煤矿",
          id: "5",
          lat: 42.947636,
          lng: 125.151955,
          address: "吉林辽源",
          type: "强降雨",
          content: "预计未来12小时仍将有30-50毫米降水，请区域内矿山注意防范。"
        },
        {
          name: "四川广旺能源发展（集团）有限责任公司",
          id: "6",
          lat: 32.430757,
          lng: 105.873413,
          address: "四川广元",
          type: "强降雨",
          content:
            "四川盆地北部和西部、甘肃东南部、陕西南部等地的部分地区有大到暴雨（100～180毫米），请区域内矿山注意防范"
        },
        {
          name: "西乡县木竹坝煤矿有限责任公司",
          id: "7",
          lat: 32.94055,
          lng: 108.075751,
          address: "陕西汉中",
          type: "强降雨",
          content:
            "四川盆地北部和西部、甘肃东南部、陕西南部等地的部分地区有大到暴雨（100～181毫米），请区域内矿山注意防范"
        },
        {
          name: "冀中能源股份有限公司东庞矿西井",
          id: "8",
          lat: 36.870231,
          lng: 114.281707,
          address: "河北邢台",
          type: "水位",
          content: "观4钻孔实时预警: 10.3807381m≥降阈值3.00m"
        },
        {
          name: "开滦能源化工股份有限公司范各庄矿业分公司",
          id: "9",
          lat: 39.651969,
          lng: 118.455707,
          address: "河北唐山",
          type: "水位",
          content: "冲17钻孔实时预警: 20.550m≥降阈值12.00m"
        }
      ],
      mapJsonCopy: [
        {
          name: "贵州中岭矿业有限责任公司中岭煤矿",
          id: "1",
          lat: 26.700332,
          lng: 105.238521,
          address: "贵州毕节",
          type: "大风",
          content:
            "未来24小时毕节地区可能受大风影响,平均风力可达6级，阵风7级，请区域内矿山注意防范。"
        },
        {
          name: "贵州广盛源集团矿业有限公司荔波县立化镇下寨煤矿",
          id: "2",
          lat: 26.406612,
          lng: 106.241334,
          address: "贵州黔南",
          type: "大风",
          content:
            "未来24小时毕节地区可能受大风影响,平均风力可达6级，阵风7级，请区域内矿山注意防范。"
        },
        {
          name: "铁法煤业（集团）有限责任公司大兴煤矿",
          id: "3",
          lat: 26.23888,
          lng: 105.925869,
          address: "辽宁铁岭",
          type: "雷电",
          content:
            "未来1到3小时，出现雷雨大风天气，平均风力可达8级以上，阵风风力可达10级以上，同时可能伴有冰雹、短时强降水等强对流天气，请区域矿山注意防范"
        },
        {
          name: "平庄煤业（集团）有限责任公司元宝山露天煤矿",
          id: "4",
          lat: 42.048224,
          lng: 119.29862,
          address: "内蒙古赤峰",
          type: "雷电",
          content:
            "未来24小时内蒙古赤峰市有大风天气，请辖区内矿山注意防范因雷电、大风引起的停电事故。"
        },
        {
          name: "辽源矿业（集团）有限责任公司金宝屯煤矿",
          id: "5",
          lat: 42.947636,
          lng: 125.151955,
          address: "吉林辽源",
          type: "强降雨",
          content: "预计未来12小时仍将有30-50毫米降水，请区域内矿山注意防范。"
        },
        {
          name: "四川广旺能源发展（集团）有限责任公司",
          id: "6",
          lat: 32.430757,
          lng: 105.873413,
          address: "四川广元",
          type: "强降雨",
          content:
            "四川盆地北部和西部、甘肃东南部、陕西南部等地的部分地区有大到暴雨（100～180毫米），请区域内矿山注意防范"
        },
        {
          name: "西乡县木竹坝煤矿有限责任公司",
          id: "7",
          lat: 32.94055,
          lng: 108.075751,
          address: "陕西汉中",
          type: "强降雨",
          content:
            "四川盆地北部和西部、甘肃东南部、陕西南部等地的部分地区有大到暴雨（100～181毫米），请区域内矿山注意防范"
        },
        {
          name: "冀中能源股份有限公司东庞矿西井",
          id: "8",
          lat: 36.870231,
          lng: 114.281707,
          address: "河北邢台",
          type: "水位",
          content: "观4钻孔实时预警: 10.3807381m≥降阈值3.00m"
        },
        {
          name: "开滦能源化工股份有限公司范各庄矿业分公司",
          id: "9",
          lat: 39.651969,
          lng: 118.455707,
          address: "河北唐山",
          type: "水位",
          content: "冲17钻孔实时预警: 20.550m≥降阈值12.00m"
        }
      ],
      tlmk_list: [],
      activeRow: ""
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "tableBg";
      } else {
        return "";
      }
    },
    initRightData() {
      this.request({
        url: "data/getData/1.8",
        method: "get"
      }).then(({ data }) => {
        this.level_fb = data.level_fb;
        this.person_fb = data.person_fb;
      });
    },
    buttonClick(type) {
      this.active = type;
      this.initBar();
    },
    getData() {
      let _this = this;
      this.request({
        url: "data/getData/1.7",
        method: "get"
      }).then(({ data }) => {
        let obj = {};
        data.forEach(v => {
          obj[v.type] = {
            data: (function(res) {
              let arr = [];

              for (let key in res) {
                arr.push({
                  name: _this.mapText[key],
                  value: res[key]
                });
              }
              return arr;
            })(v.data),
            total: v.total
          };
        });
        this.rightObj = obj;
        this.initBar();
      });
    },
    initBar() {
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const yAxisPoint = shape.yAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x + 9, shape.y - 9];
          const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9];
          const c3 = [yAxisPoint[0], yAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        }
      });
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const yAxisPoint = shape.yAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [yAxisPoint[0], yAxisPoint[1]];
          const c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18];
          const c4 = [shape.x + 9, shape.y + 18];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        }
      });
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + 9, shape.y + 18];
          const c3 = [shape.x + 18, shape.y + 9];
          const c4 = [shape.x + 9, shape.y - 9];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        }
      });
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);
      let res = this.rightObj[this.active].data;
      let VALUE = [];

      let NAMES = [];
      res.forEach(v => {
        VALUE.push(Number(v.value));
        NAMES.push(v.name);
      });
      const MAX = [100, 100, 100, 100, 100, 100, 100, 100];

      this.barOption = {
        backgroundColor: "#0D1A7C",
        title: {
          text: "",
          top: 32,
          left: 18,
          textStyle: {
            color: "#00F6FF",
            fontSize: 24
          }
        },
        grid: {
          left: 30,
          right: 40,
          bottom: "10",
          top: 10,
          containLabel: true
        },
        yAxis: {
          type: "category",
          data: NAMES,
          axisLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          },
          offset: 20,
          axisTick: {
            show: false,
            length: 2,
            alignWithLabel: true,
            lineStyle: {
              color: "red"
            }
          },
          axisLabel: {
            fontSize: 14
          }
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            fontSize: 16
          },
          boundaryGap: ["1%", "20%"]
        },
        series: [
          {
            type: "custom",
            renderItem: function(params, api) {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: "rgba(7,29,97,.6)"
                    }
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: "rgba(10,35,108,.7)"
                    }
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: "rgba(11,42,106,.8)"
                    }
                  }
                ]
              };
            },
            data: MAX
          },
          {
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {
                          offset: 0,
                          color: "#3B80E2"
                        },
                        {
                          offset: 1,
                          color: "#49BEE5"
                        }
                      ])
                    }
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {
                          offset: 0,
                          color: "#3B80E2"
                        },
                        {
                          offset: 1,
                          color: "#49BEE5"
                        }
                      ])
                    }
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {
                          offset: 0,
                          color: "#3B80E2"
                        },
                        {
                          offset: 1,
                          color: "#49BEE5"
                        }
                      ])
                    }
                  }
                ]
              };
            },
            data: VALUE
          },
          {
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: e => {
                  return e.data + "座";
                },
                fontSize: 14,
                color: "#fff",
                offset: [20, 4]
              }
            },
            itemStyle: {
              color: "transparent"
            },
            data: VALUE
          }
        ]
      };
    },
    initYJ() {
      this.activeRow = "";
      this.mapJson = JSON.parse(JSON.stringify(this.mapJsonCopy));
      this.vm.$refs.jdtqohyjMap.initAll();
    },
    filterMapJson(id) {
      console.log(id);
      this.activeRow = id;
      let newOList = JSON.parse(JSON.stringify(this.mapJsonCopy));
      let row = newOList.find(v => {
        return v.id == id;
      });
      if (row) {
        let arr = [];
        arr.push(row);
        this.mapJson = arr;
      } else {
        this.mapJson = [];
      }
    },
    rowClick(row) {
      this.activeRow = row.id;
      this.vm.$refs.jdtqohyjMap.markerClick(row);
    },
    initdiaLine(){
        this.dia.show=true;
        let colorArr=["#BB00E0","#D5AE2B","#24B011","#2DFFFF","#F6D06F"];
        // this.request({
        //   url: "data/getData/3.34",
        //   method: "get"
        // }).then(({data})=> {
          // console.log(data)
          let time=["2021-07-05 00:03:18", "2021-07-05 00:09:16", "2021-07-05 00:15:28", "2021-07-05 00:21:16", "2021-07-05 00:27:15", "2021-07-05 00:33:11", "2021-07-05 00:39:15", "2021-07-05 00:45:21", "2021-07-05 00:51:17", "2021-07-05 00:57:13", "2021-07-05 01:03:17", "2021-07-05 01:09:16", "2021-07-05 01:15:20", "2021-07-05 01:21:17", "2021-07-05 01:27:15", "2021-07-05 01:33:20", "2021-07-05 01:39:16", "2021-07-05 01:45:22", "2021-07-05 01:51:19", "2021-07-05 01:57:17", "2021-07-05 02:03:14", "2021-07-05 02:09:18", "2021-07-05 02:15:24", "2021-07-05 02:21:20", "2021-07-05 02:27:16", "2021-07-05 02:33:20", "2021-07-05 02:39:11", "2021-07-05 02:45:23", "2021-07-05 02:51:19", "2021-07-05 02:57:18", "2021-07-05 03:03:14", "2021-07-05 03:09:18", "2021-07-05 03:15:25", "2021-07-05 03:21:21", "2021-07-05 03:27:17", "2021-07-05 03:33:15", "2021-07-05 03:39:19", "2021-07-05 03:45:26", "2021-07-05 03:51:15", "2021-07-05 03:57:19", "2021-07-05 04:03:11", "2021-07-05 04:09:15", "2021-07-05 04:15:22", "2021-07-05 04:21:18", "2021-07-05 04:27:14", "2021-07-05 04:33:14", "2021-07-05 04:39:19", "2021-07-05 04:45:25", "2021-07-05 04:51:23", "2021-07-05 04:57:19", "2021-07-05 05:03:18", "2021-07-05 05:09:14", "2021-07-05 05:15:26", "2021-07-05 05:21:25", "2021-07-05 05:27:29", "2021-07-05 05:33:28", "2021-07-05 05:40:06", "2021-07-05 05:47:04", "2021-07-05 05:52:31", "2021-07-05 05:58:51", "2021-07-05 06:05:13", "2021-07-05 06:11:35", "2021-07-05 06:17:57", "2021-07-05 06:23:10", "2021-07-05 06:28:10", "2021-07-05 06:35:02", "2021-07-05 06:40:59", "2021-07-05 06:49:49", "2021-07-05 06:57:24", "2021-07-05 07:03:20", "2021-07-05 07:09:25", "2021-07-05 07:16:57", "2021-07-05 07:23:11", "2021-07-05 07:31:13", "2021-07-05 07:36:24", "2021-07-05 07:42:28", "2021-07-05 07:48:28", "2021-07-05 07:54:24", "2021-07-05 08:02:24", "2021-07-05 08:09:25", "2021-07-05 08:15:48", "2021-07-05 08:22:35", "2021-07-05 08:28:02", "2021-07-05 08:33:26", "2021-07-05 08:39:17", "2021-07-05 08:45:37", "2021-07-05 08:51:25", "2021-07-05 08:57:16", "2021-07-05 09:03:20", "2021-07-05 09:09:24", "2021-07-05 09:15:39", "2021-07-05 09:21:19", "2021-07-05 09:27:23", "2021-07-05 09:33:21", "2021-07-05 09:39:17", "2021-07-05 09:45:30", "2021-07-05 09:51:20", "2021-07-05 09:57:25", "2021-07-05 10:03:21", "2021-07-05 10:09:20", "2021-07-05 10:15:32", "2021-07-05 10:21:28", "2021-07-05 10:27:19", "2021-07-05 10:33:23", "2021-07-05 10:39:27", "2021-07-05 10:45:34", "2021-07-05 10:51:22", "2021-07-05 10:57:26", "2021-07-05 11:03:19", "2021-07-05 11:09:23", "2021-07-05 11:15:30", "2021-07-05 11:21:26", "2021-07-05 11:27:22", "2021-07-05 11:33:26", "2021-07-05 11:39:25", "2021-07-05 11:45:37", "2021-07-05 11:51:21", "2021-07-05 11:57:25", "2021-07-05 12:03:21", "2021-07-05 12:09:20", "2021-07-05 12:15:32", "2021-07-05 12:21:29", "2021-07-05 12:27:19", "2021-07-05 12:33:24", "2021-07-05 12:39:28", "2021-07-05 12:45:35", "2021-07-05 12:51:23", "2021-07-05 12:57:27", "2021-07-05 13:03:25", "2021-07-05 13:09:21", "2021-07-05 13:15:36", "2021-07-05 13:21:25", "2021-07-05 13:27:21", "2021-07-05 13:33:21", "2021-07-05 13:39:25", "2021-07-05 13:45:32", "2021-07-05 13:51:21", "2021-07-05 13:57:25", "2021-07-05 14:03:24", "2021-07-05 14:09:20", "2021-07-05 14:15:35", "2021-07-05 14:21:24", "2021-07-05 14:27:28", "2021-07-05 14:33:24", "2021-07-05 14:39:23", "2021-07-05 14:45:35", "2021-07-05 14:51:26", "2021-07-05 14:57:22", "2021-07-05 15:03:27", "2021-07-05 15:09:23", "2021-07-05 15:15:37", "2021-07-05 15:21:25", "2021-07-05 15:27:29", "2021-07-05 15:33:20", "2021-07-05 15:39:24", "2021-07-05 15:45:38", "2021-07-05 15:51:27", "2021-07-05 15:57:23", "2021-07-05 16:02:03", "2021-07-05 16:09:09", "2021-07-05 16:15:13", "2021-07-05 16:21:12", "2021-07-05 16:27:16", "2021-07-05 16:33:12", "2021-07-05 16:39:11", "2021-07-05 16:45:15", "2021-07-05 16:51:14", "2021-07-05 16:57:10", "2021-07-05 17:03:14", "2021-07-05 17:09:13", "2021-07-05 17:15:17", "2021-07-05 17:21:13", "2021-07-05 17:27:12", "2021-07-05 17:33:08", "2021-07-05 17:39:12", "2021-07-05 17:45:18", "2021-07-05 17:51:14", "2021-07-05 17:57:18", "2021-07-05 18:03:14", "2021-07-05 18:09:13", "2021-07-05 18:15:17", "2021-07-05 18:21:14", "2021-07-05 18:27:12", "2021-07-05 18:33:17", "2021-07-05 18:39:13", "2021-07-05 18:45:20", "2021-07-05 18:51:16", "2021-07-05 18:57:15", "2021-07-05 19:03:11", "2021-07-05 19:09:15", "2021-07-05 19:15:21", "2021-07-05 19:21:09", "2021-07-05 19:27:13", "2021-07-05 19:33:17", "2021-07-05 19:39:08", "2021-07-05 19:45:28", "2021-07-05 19:51:16", "2021-07-05 19:57:15", "2021-07-05 20:03:11", "2021-07-05 20:09:15", "2021-07-05 20:15:14", "2021-07-05 20:21:18", "2021-07-05 20:27:14", "2021-07-05 20:33:12", "2021-07-05 20:39:16", "2021-07-05 20:45:20", "2021-07-05 20:51:18", "2021-07-05 20:57:14", "2021-07-05 21:03:19", "2021-07-05 21:09:15", "2021-07-05 21:15:14", "2021-07-05 21:21:18", "2021-07-05 21:27:17", "2021-07-05 21:33:13", "2021-07-05 21:39:17", "2021-07-05 21:45:16", "2021-07-05 21:51:12", "2021-07-05 21:57:16", "2021-07-05 22:03:15", "2021-07-05 22:09:19", "2021-07-05 22:15:23", "2021-07-05 22:21:14", "2021-07-05 22:27:18", "2021-07-05 22:33:14", "2021-07-05 22:39:13", "2021-07-05 22:45:17", "2021-07-05 22:51:13", "2021-07-05 22:57:19", "2021-07-05 23:03:15", "2021-07-05 23:09:19", "2021-07-05 23:15:18", "2021-07-05 23:21:14", "2021-07-05 23:27:11", "2021-07-05 23:33:10", "2021-07-05 23:39:15", "2021-07-05 23:45:22", "2021-07-05 23:51:18", "2021-07-05 23:57:14"];
           this.show=true;
           this.dia.option={
              color:colorArr,
              tooltip : {
                trigger: 'axis'
              },
              // dataZoom: [
              //   {
              //       show: true,
              //       realtime: true,
              //       start: 30,
              //       end: 70,
              //       xAxisIndex: [0, 1]
              //   },
              //   {
              //       type: 'inside',
              //       realtime: true,
              //       start: 30,
              //       end: 70,
              //       xAxisIndex: [0, 1]
              //   }
              // ],
              grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
              },
              calculable : true,
              xAxis : [
                  {
                    type : 'category',
                    boundaryGap : true,
                    data :time,
                    axisTick: {
                      show: true //隐藏X轴刻度
                    },
                    axisLine: {
                      show: true,
                      lineStyle: {
                        color: "#fff"
                      }

                    },
                    axisLabel: {
                        // interval:0, //强制显示文字
                        // rotate:20,
                        show: true,
                        textStyle: {
                        color: "#000" //X轴文字颜色
                        }
                    },
                  }
                ],
              yAxis : [
                  {
                    type : 'value',
                    nameTextStyle: {
                      color: "#000"
                    },

                    axisLine: {
                      show:false,
                    },
                    axisTick: {
                      show: false
                    },
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: "#000"
                      }
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        type: 'dashed',
                        color: '#DDD'
                      }
                    },
                  }
                ],
              series : [
                  {
                    name:"井下人数",
                    type:'line',
                    min:10,
                    max:40,
                    data: [148, 151, 118, 97, 91, 93, 89, 90, 104, 121, 126, 144, 160, 171, 174, 178, 173, 173, 173, 173, 173, 172, 172, 172, 168, 168, 168, 163, 160, 159, 159, 159, 159, 159, 159, 159, 159, 159, 160, 158, 158, 158, 158, 159, 159, 159, 157, 163, 164, 164, 164, 163, 163, 167, 163, 162, 162, 162, 162, 162, 162, 163, 170, 164, 164, 164, 164, 164, 164, 164, 164, 164, 164, 164, 160, 161, 162, 163, 163, 167, 166, 175, 166, 182, 206, 211, 227, 244, 236, 252, 255, 264, 268, 269, 266, 272, 272, 272, 263, 258, 257, 256, 253, 253, 253, 253, 253, 253, 253, 237, 233, 233, 232, 232, 232, 228, 228, 227, 227, 227, 227, 227, 227, 227, 226, 230, 230, 229, 229, 229, 229, 227, 227, 227, 225, 225, 225, 224, 220, 218, 218, 218, 218, 218, 218, 218, 217, 212, 212, 212, 212, 211, 211, 210, 211, 211, 205, 214, 217, 222, 205, 173, 174, 160, 166, 172, 177, 180, 191, 201, 200, 197, 193, 182, 182, 181, 172, 172, 159, 159, 159, 149, 148, 136, 136, 132, 130, 128, 128, 110, 98, 98, 94, 92, 92, 92, 83, 74, 73, 72, 72, 71, 68, 67, 66, 61, 56, 54, 54, 50, 50, 42, 42, 38, 36, 30, 30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 18, 18, 16, 16, 14, 12, 11, 10, 8],
                    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                    showAllSymbol: true,
                    symbolSize: 0,
                    lineStyle: {
                      normal: {
                        width: 5,
                        color: {
                          type: 'linear',
                          colorStops: [{
                            offset: 0,
                            color: '#BB00E0' // 0% 处的颜色
                          },
                            {
                              offset: 0.4,
                              color: '#BB00E0' // 100% 处的颜色
                            }, {
                              offset: 1,
                              color: '#BB00E0' // 100% 处的颜色
                            }
                          ],
                          globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(120,26,133, 0.5)',
                        shadowBlur: 2,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                      }
                    },
                    smooth: true,
                  },
                ]
            }


        // })
     }
  },
  mounted() {
    this.initRightData();
    // this.initBar();
    this.getData();
  }
};
</script>
<style scoped>
.full-h {
  height: 100%;
}
.full-w {
  width: 100%;
}
.panel-title {
  width: 100%;
  height: 3vh;
  font-size: 0.9vw;
  line-height: 2.4vh;
  color: #fff;
  text-align: center;
}
.panel-title b {
  display: inline-block;
  width: 2vh;
  height: 2vh;
  background: url("/vae/images/zuo.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.panel-title i {
  display: inline-block;
  width: 2vh;
  height: 2vh;
  background: url("/vae/images/you.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.btm_panel .cont_panel {
  height: 12vh;
  margin: 0.9vh;
  color: #fff;
  cursor: pointer;
  background: url("/vae/images/tiao-1.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.btm_panel .panel-content {
  height: 81vh;
  overflow: auto;
}
.cont_panel:hover,
.cont_panel.active {
  background: url("/vae/images/tiao-2.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.cont_panel .lft_img {
  height: 6vh;
  width: 6vh;
  margin: 1vh 0;
  background: url("/vae/images/jingdeng.gif") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
  float: left;
}
.cont_panel .ct_panel {
  
  width: calc(100% - 6vh);
  float: left;
}

.ct_panel .title {
  color: #21ecf9;
  font-size: 0.8vw;
  padding: 0.5vh 0;
}
.ct_panel .ctitle {
  color: #fff;
  font-size: 0.6vw;
}

.right_panel {
  background: url("/vae/images/panel_bg2.png") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: cover;
  background-position: center 0;
}
.right_panel .top_panel {
  width: calc(100% - 1vw);
  margin: 0 auto;
  height: 16vh;
  margin-top: 6vh;
  -o-background-size: cover;
  background-position: center 0;
  box-sizing: border-box;
}
.right_panel .panel-title {
  padding-top: 2vh;
}
.right_panel .cont_panel .el-table {
  width: calc(100% - 0.1vw);
  margin: 0 0.05vw;
}
</style>
<style lang="less">
.jdtqohyj {
  .left_panel {
    background: url("/vae/images/md_panel_bg.png") no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: cover;
    background-position: center 0;
    .left_title {
      position: relative;
      color: #fff;
      font-size: 1.6vh;
      top: 0.8vh;
      width: 100%;
      text-align: center;
      .buttonDiv {
        width: 2vw;
        height: 3vh;
        background: url("../../public/images/Tai_di.png") no-repeat;
        background-size: 100% 100%;
        color: #23edff;
        text-align: center;
        float: left;
        line-height: 3vh;
        margin-left: 0.5vw;
        cursor: pointer;
      }
      .buttonDiv.active {
        background: url("../../public/images/Tai_dian.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .btm_panel {
      height: calc(40%);
      width: calc(100% - 2vw);
      margin: 0 auto;
      padding: 1vh 0.5vw 1vh 0.5vw;

      .text-panel {
        margin-top: 2vh;
        img {
          width: 100%;
        }
        .text {
          color: #fff;
          font-size: 1.2vh;
          padding-bottom: 0.1vh;
          padding-left: 0.5vw;
          text-align: center;
        }
        .num {
          color: #40e6fe;
          font-size: 1.6vh;
          font-family: "黑体";
          padding-left: 0.5vw;
          text-align: center;
          span {
            color: #fff;
            font-size: 1.4vh;
          }
        }
      }
    }
    .btm_panel2 {
      height: calc(60% - 5vh);
      width: calc(100% - 2vw);
      margin: 0 auto;
      .echart-panel {
        height: calc(95%);
        padding: 0.5vh;
        background: url("../../public/images/bj1.png") no-repeat;
        background-size: 100% 100% !important;
        box-sizing: border-box;
        .panel-title {
          font-size: 1.4vh;
          line-height: 2vh;
          text-align: center;
          margin-top: 1vh;
          color: #fff;
          b {
            display: inline-block;
            width: 2vh;
            height: 2vh;
            background: url("../../public/images/zuo.png") no-repeat;
            background-size: contain;
            vertical-align: middle;
          }
          i {
            display: inline-block;
            width: 2vh;
            height: 2vh;
            background: url("../../public/images/you.png") no-repeat;
            background-size: contain;
            vertical-align: middle;
          }
        }
        .panel-content {
          height: calc(100% - 4vh);
          .listPanel {
            height: 100%;
            .listRow {
              background: url("../../public/images/bj.png");
              background-size: 100% 100%;
              height: 3vh;
              width: calc(93%);
              color: #fff;
              font-size: 1.2vh;
              line-height: 2vh;
              padding: 1vh;
              margin: 1vh 0;
            }
          }
        }
      }
    }
    .cjdy_right_panel {
      width: 100%;
      height: 100%;
      text-align: center;
      .box {
        width: 80%;
        display: inline-block;
        text-align: center;
        padding: 0 0.5vw;
        box-sizing: border-box;
        .text {
          font-size: 1vh;
          color: #fff;
          padding-top: 2vh;
          text-align: center;
        }
        .bg {
          width: 100%;
          text-align: center;
          height: 6vh;
          line-height: 6vh;
          background: url("../../public/images/jdtq_02.png") no-repeat;
          background-size: 100% 100%;
          color: #40e6fe;
          font-size: 2vh;
          span {
            font-size: 1vh;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

